import React, { useMemo, useState } from 'react'
import { NavBar, Button, Toast, Modal, Radio, List, Checkbox, Form, Input, } from 'antd-mobile'
import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
import styles from './addPerson.module.css'
import dayjs from 'dayjs'
import instance from '../../api/instance'
import { DeleteOutline, FillinOutline, ScanningOutline } from 'antd-mobile-icons'
import { useDispatch, useSelector } from 'react-redux'
import { SwitchPer, DelPer, AddPer, EditPer } from '../../store/PerSonSlice'

function Index() {
    let navigate = useNavigate()
    let dispatch = useDispatch()
    const [visible, setVisible] = useState(false)
    const [form] = Form.useForm()

    const { PersonList } = useSelector((state) => state.PerSonReducer)
    const Person = useMemo(() => {
        return PersonList.filter((item) => {
            return item.state
        })
    }, [PersonList])
    console.log(Person)

    //删除
    const handelDel = (item) => {
        Toast.show('删除成功')
        dispatch(DelPer(item))
    }

    //新增
    const handelAdd = () => {
        setVisible(true)
        setFlag(true)
        form.resetFields('')
    }

    //身份录入
    const handelSfz = () => {
        const input = document.createElement('input')
        input.type = 'file'
        input.click()

        input.onchange = async () => {
            const file = input.files[0]
            const fileData = new FormData();
            fileData.append('file', file);
            const res = await instance.post('/api/orc/upload/image', fileData)
            console.log('res', res)
            const { code, data } = res.data
            if (code == 200) {
                form.setFieldsValue(data)
            }
        }
    }

    //编辑
    const handelEdit = (item) => {
        setVisible(true)
        setFlag(false)
        form.setFieldsValue(item)
        setEditId(item.id)
    }

    //确定
    const [flag, setFlag] = useState(true)
    const [editId, setEditId] = useState(null)
    const handelOk = (action) => {
        if (action.key === 'confirm') {
            if (flag) {
                const addObj = {
                    id: Number(Math.random().toString().slice(2, 6)),
                    state: false,
                    ...form.getFieldsValue()
                }
                dispatch(AddPer(addObj))
            }
            else {
                const editObj = {
                    id: editId,
                    ...form.getFieldsValue()
                }
                dispatch(EditPer(editObj))
            }
        }
        else {
            setVisible(false)
        }
    }

    const onFinish = (values) => {
        if (values === '') {
            Toast.show('内容不得为空')
        }
    }

    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>新增乘客</NavBar>
            <Button block color='primary' size='small' onClick={() => handelAdd()}>
                添加乘客
            </Button>
            <List>
                {
                    PersonList.map((item, index) => {
                        return <List.Item key={index} description={item.code}
                            extra={<div>
                                <DeleteOutline style={{ color: 'red', marginRight: '5px' }}
                                    onClick={() => handelDel(item)} />
                                <Checkbox checked={item.state} onChange={() => dispatch(SwitchPer(item))} />
                            </div>}
                            prefix={<FillinOutline onClick={() => handelEdit(item)} />}>{item.name}</List.Item>
                    })
                }
            </List>
            <Modal
                visible={visible}
                content={<div>
                    <Button block color='primary' size='large' fill='none' onClick={() => handelSfz()}>
                        <ScanningOutline />证件扫描
                    </Button>
                    <div style={{ fontSize: '14px' }}>乘客类型:<Radio checked>成人</Radio><Radio>儿童</Radio><Radio>学生</Radio></div>
                    <Form layout='horizontal' form={form}
                        onFinish={onFinish}
                        footer={
                            <Button block type='submit' color='warning' size='large' shape='rounded'>
                                确定
                            </Button>
                        }>
                        <Form.Item
                            name='name'
                            label='姓名'
                            rules={[{ required: true, message: '姓名不能为空' }]}
                        >
                            <Input placeholder='请输入姓名' />
                        </Form.Item>
                        <Form.Item
                            label='证件类型'
                            rules={[{ required: true, message: '证件类型不能为空' }]}
                        >
                            身份证
                        </Form.Item>
                        <Form.Item
                            name='code'
                            label='证件号码'
                            rules={[{ required: true, message: '证件号码不能为空' }]}
                        >
                            <Input placeholder='请输入证件号码' />
                        </Form.Item>
                        <Form.Item
                            label='手机号(+86)'
                            rules={[{ required: true, message: '手机号不能为空' }]}
                        >
                            <Input placeholder='请输入手机号' />
                        </Form.Item>
                    </Form>
                </div>}
                closeOnAction
                onClose={() => {
                    setVisible(false)
                }}
                onAction={(action) => handelOk(action)}
                actions={[
                    {
                        key: 'confirm',
                        text: '确定',
                    },
                    {
                        key: 'cancel',
                        text: '取消',
                    },
                ]}
            />
        </div>
    )
}

export default Index
